Ext.define('AmpleHarvest.views.newsmap.main',
{
    extend          : 'Ext.panel.Panel',
    alias           : 'widget.ampleharvest-views-mewsmap-main',
    requires        :
    [
            'AmpleHarvest.views.contentSection.content',
            
    ],
    anchor          : '100% 100%',
    autoScroll	: true,
    layout			: //'fit',
	{
		type	: 'auto',
		align	: 'stretch'
	},
    listeners       :
    {
    	
    },
    
    initComponent   : function()
    {
    	this.obj_data = {
    			sports	: [
    			      	   {
    			      		   	name	: 'THIS IS THE NAME',
    			      		   	value	: 40
    			      	   },
    			      	   {
    			      		   	name	: 'Another awesome story',
  			      		   		value	: 30	
    			      	   },
    			      	   {
    			      		   	name	: 'This story has a super long name and we have to deal with it because that is life',
    			      		   	value	: 10	
    			      	   },
    			      	   {
   			      		   		name	: 'Short',
   			      		   		value	: 10	
    			      	   },
    			      	   {
   			      		   		name	: 'I have a : and a ? and a /',
   			      		   		value	: 8	
    			      	   },
    			      	   {
    			      		   	name	: 'last one',
    			      		   	value	: 2
    			      	   }
    			]
    	};
    	
    	
//    	this.m_obj_content = Ext.create('AmpleHarvest.views.contentSection.content',
//    			{
//    				flex	: 1,
//    				classification	: 'UNCLASSIFIED//FOR OFFICIAL USE ONLY'
//    			});
//
//        this.items =
//        [
//                this.m_obj_content
//        ]
        this.callParent();
        
        this.create_page(this.obj_data);
    },
    
    create_page		: function(obj_data)
    {
    	var counter = 0;
    	for (var int in obj_data)
    	{
    		var m_obj_panel = Ext.create('Ext.panel.Panel',
        			{
						title		: '',
						layout		: 'vbox',
						width		: '80%',
						autoScroll	: true
        			});
    		var limit = 50;
    		var str_dir_box = 'hbox';
    		for (var int2 in obj_data[int])
    		{
    			counter += obj_data[int][int2]['value'];
    			if(counter > limit)
    			{
    				var m_obj_holder = this.create_holder(m_obj_panel, str_dir_box);
    				limit = 70;
    				str_dir_box = 'hbox';
    			}
    			this.create_panel(m_obj_panel, obj_data[int][int2]);
    		}
    		this.add(m_obj_panel);
    	}
    },
    
    create_holder	: function(obj_parent, str_dir_box)
    {
    	var obj_holder = Ext.create('Ext.panel.Panel',
    			{
			title	: '',
			width	: '50%',
			height	: 100,
			layout	: str_dir_box, // or hbox
		});
    	obj_parent.add(obj_holder);
    	return obj_holder;
    },
    
    create_panel	: function(obj_parent, obj_data)
    {
    	var obj_panel = Ext.create('Ext.panel.Panel',
    			{
					width	: obj_data.value+'%',
					height	: 300,
					cls		: 'color:red',
					html	: '<div style="color:red;font-size:40pt">'+obj_data.name+'</div>'
    			});
    	obj_parent.add(obj_panel);
    	return obj_panel;
    }
});


